<template>
  <div>
    <a-table rowKey="id" bordered size="small" :dataSource="props.tableData" :columns="columns" :pagination="false">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'styleId'">
          <a-select v-model:value="record.styleId" allowClear :placeholder="$t('common.pleaseSelect')" style="width: 250px;">
            <a-select-option v-for="(item,index) in props.styleList" :disabled="getDisabledOption(item.value)" :value="item.value" :key="index">{{ item.label }}</a-select-option>
          </a-select>
        </template>
        <template v-else-if="column.key === 'quantity'">
          <a-input-number :placeholder="$t('common.pleaseInput')" v-model:value="record.quantity" :min="0" :max="999999999" allowClear />
        </template>
        <template v-else-if="column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="handleAdd">{{$t('common.addNew')}}</a-button>
            <a-divider type="vertical" />
            <a-button type="link" class="warning-link" :disabled="props.tableData.length === 1" @click="handleDelete(record.id)">{{$t('common.del')}}</a-button>
          </span>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script setup name="styleTable">
import { ref } from 'vue';
const emits = defineEmits(['addType', 'deleteType'])
import i18n from '@/locales/index' 
const { t } = i18n.global
const props = defineProps({
  styleList: {
    type: Array,
    default: () => []
  },
  tableData: {
    type: Array,
    default: () => []
  }
})
const getDisabledOption = (styleId) => {
  const selectList = props.tableData.map(item => item.styleId)
  return selectList.includes(styleId)
}

const columns = ref([
  {
    title: t('common.sequenceNo'), dataIndex: 'index', key: 'index', align: 'center', width: 60,
    customRender: ({ index }) => {
      return index + 1
    }
  },
  { title: t('basicData.style'), dataIndex: 'styleId', key: 'styleId', align: 'center' },
  { title: t('common.number'), dataIndex: 'quantity', key: 'quantity', align: 'right', width: '35%' },
  { title: t('common.operate'), dataIndex: 'operate', key: 'operate', align: 'center', width: 120 },
])

const handleAdd = () => {
  emits('addType', {
    id: Math.random(),
    quantity: null,
    styleId: undefined
  })
}

const handleDelete = (id) => {
  emits('deleteType', id)
}



</script>
